<template>
  <div>
    <Header :left="true" leftText="返回" title="维修审核" />
    <div>
      <van-row style="margin-top:5px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message">报修多媒体信息</van-col>
      </van-row>
    </div>
    <Field
      v-model="record.requestRemark"
      style="margin-left:-5px;"
      readonly
      size="large"
      rows="1"
      autosize
      label="报修描述"
      type="textarea"
    />
    <!-- 多媒体信息 -->

    <van-row style="margin-top:10px;">
      <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">视频：</van-col>
      <van-col span="14" style="color:#A9A9A9;">
        <!-- 循环显示视频 -->
        <div v-show="requestVedioShow" v-for="item in requestFile.vedios" :key="item.id" style="margin-left:-10px;">
          <van-image
            style="float:left;"
            width="50"
            height="40"
            @click="playVedio(item.filePath)"
            src="assets/vedio.png"
          />
        </div>
      </van-col>
    </van-row>
    <van-divider style="margin-top:0px;" />
    <van-row style="margin-top:10px;">
      <van-col span="24" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">照片：</van-col>
      <van-col span="4"></van-col>
      <van-col span="20" style="color:#A9A9A9;"
        ><van-uploader
          v-show="requestPhotoShow"
          v-model="requestFile.pictures"
          :deletable="false"
          multiple
          :max-count="requestFile.pictures.length"
      /></van-col>
    </van-row>
    <van-divider style="margin-top:0px;" />
    <van-row style="margin-top:10px;">
      <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">语音：</van-col>
      <van-col span="14" style="color:#A9A9A9;"
        ><div
          v-show="requestAudioShow"
          @click="playArm(requestFile.audioPath)"
          style="background-color: #00FF33; width:140px;height:35px; margin-left:-10px;"
        >
          <van-image
            v-show="audioStop"
            width="40"
            height="30"
            style="margin-right:3px;float:left;"
            src="assets/voice.png"
          >
          </van-image>
          <van-loading v-show="audioLoad" style="float:center;" color="white"
            ><span style="color:white;font-size:15px;">播放中...</span></van-loading
          >
        </div></van-col
      >
    </van-row>

    <!-- 维修 -->
    <div>
      <van-row style="margin-top:20px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message">维修多媒体信息</van-col>
      </van-row>
    </div>

    <Field
      v-model="record.repairRemark"
      style="margin-left:-5px;"
      readonly
      size="large"
      rows="1"
      autosize
      label="维修描述"
      type="textarea"
    />

    <van-row style="margin-top:10px;">
      <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">视频：</van-col>
      <van-col span="14" style="color:#A9A9A9;">
        <!-- 循环显示视频 -->
        <div v-show="repairVedioShow" v-for="item in repairFiles.vedios" :key="item.id" style="margin-left:-10px;">
          <van-image
            style="float:left;"
            width="50"
            height="40"
            @click="playVedio(item.filePath)"
            src="assets/vedio.png"
          />
        </div>
      </van-col>
    </van-row>
    <van-divider style="margin-top:0px;" />
    <van-row style="margin-top:10px;">
      <van-col span="24" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">照片：</van-col>
      <van-col span="4"></van-col>
      <van-col span="20" style="color:#A9A9A9;"
        ><van-uploader
          v-show="repairPhotoShow"
          v-model="repairFiles.pictures"
          :deletable="false"
          multiple
          :max-count="repairFiles.pictures.length"
      /></van-col>
    </van-row>
    <van-divider style="margin-top:0px;" />
    <van-row style="margin-top:10px;">
      <van-col span="4" style="font-weight:bold;color:#A9A9A9;margin-left:10px;margin-top:8px;">语音：</van-col>
      <van-col span="14" style="color:#A9A9A9;"
        ><div
          v-show="repairAudioShow"
          @click="playArm(repairFiles.audioPath)"
          style="background-color: #00FF33; width:140px;height:35px; margin-left:-10px;"
        >
          <van-image
            v-show="audioStop"
            width="40"
            height="30"
            style="margin-right:3px;float:left;"
            src="assets/voice.png"
          >
          </van-image>
          <van-loading v-show="audioLoad" style="float:center;" color="white"
            ><span style="color:white;font-size:15px;">播放中...</span></van-loading
          >
        </div></van-col
      >
    </van-row>

    <div>
      <!-- 标签 -->
      <van-row style="margin-top:20px;">
        <van-col><van-image width="40" height="30" style="margin-left:-10px;" src="assets/block.png"/></van-col>
        <van-col class="message">维修信息</van-col>
      </van-row>
    </div>
    <!-- 分割线 -->
    <div style="background-color: #F5F5F5;height:5px;"><span></span></div>
    <!-- 数据信息 -->
    <div class="divMessage">
      <Field
        v-model="record.equipCode"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="设备编码"
      />
      <Field
        v-model="record.equipName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="设备名称"
      />
      <Field
        v-model="record.statusName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;white-space:nowrap;"
        center
        colon
        label="单据状态"
      />
      <Field
        v-model="record.faultType"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="故障类型"
      />
      <Field
        v-model="record.requestUserName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="报修人"
      />
      <Field
        v-model="record.requestTime"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="报修时间"
      />
      <Field
        v-model="record.checkUserName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="审核人"
      />
      <Field
        v-model="record.checkTime"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="审核时间"
      />
      <Field
        v-model="record.repairUserName"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;"
        center
        colon
        label="主修人"
      />
      <Field
        v-model="helpUser"
        style="font-weight:bold;color:#A9A9A9;white-space:nowrap;"
        readonly
        size="small"
        rows="1"
        autosize
        label="协助人"
        type="textarea"
      />
      <Field
        v-model="repairTime.startTime"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;white-space:nowrap;"
        center
        colon
        label="维修开始时间"
      />
      <Field
        v-model="repairTime.endTime"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;white-space:nowrap;"
        center
        colon
        label="维修结束时间"
      />
      <Field
        v-model="repairTime.workTime"
        :readonly="true"
        size="small"
        style="font-weight:bold;color:#A9A9A9;height:40px;white-space:nowrap;"
        center
        colon
        label="维修工时(Min)"
      />
    </div>
  </div>
</template>
<script>
import {
  Icon,
  Button,
  CellGroup,
  Cell,
  Field,
  Loading,
  tab,
  Uploader,
  tabs,
  Col,
  Row,
  Image as VanImage,
  Divider,
  Checkbox,
  Pagination,
  Panel,
  Toast,
  Dialog,
  popup,
  Picker,
} from 'vant'
import { _httpClient } from '@/libs/api'
import { storage } from '@/libs/utils'
import { removeToken, getToken, setBaseApiFrefix, getBaseApiFrefix } from '@/libs/auth'
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(tab)
Vue.use(tabs)
Vue.use(Button)
Vue.use(Col)
Vue.use(Row)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Divider)
Vue.use(Checkbox)
Vue.use(Pagination)
Vue.use(Panel)
Vue.use(Dialog)
Vue.use(Picker)
Vue.use(popup)
Vue.use(Uploader)
Vue.use(Loading)
import Header from '@/components/header.vue'
import apicloud from '@/libs/apicloud'
export default {
  components: { Button, Header, Icon, CellGroup, Cell, Field, tab, tabs, Col, Row, Picker },

  data() {
    return {
      btnLoading: false,
      winName: '', //窗口名
      user: [], //当前登录用户
      //多媒体文件
      photoList: [
        //图片
      ],
      helpUser: null,
      record: null,
      requestPictureNum: 0, //照片数量
      reqpairPictureNum: 0,
      playing: '播放中...', //语音播放中字幕
      audioLoad: false, // 语音播放中
      audioStop: true, // 语音暂停
      requestPhotoShow: false, //照片显示控制
      repairPhotoShow: false, //照片显示控制
      requestVedioShow: false, //视频显示控制
      repairVedioShow: false, //视频显示控制
      requestAudioShow: false, //语音显示控制
      repairAudioShow: false, //语音显示控制
      vedioList: [], //视频
      requestAudioPath: '', //语音
      repairAudioPath: '', //语音

      sourceShowPicker: false,
      allSelected: false,
      selectFont: '一键勾选',
      screenWidth: 0,
      checked: true,
      active: 2,
      currentPage: 1,
      fileUrl: '',
      //报修多媒体
      requestFile: {
        pictures: [],
        vedios: [],
        audioPath: null,
      },
      repairFiles: {
        pictures: [],
        vedios: [],
        audioPath: null,
      }, //维修多媒体
      repairTime: {
        startTime: null,
        endTime: null,
        stopNum: null,
        workTime: null,
      }, //维修工时
      columns: [{ fault_key: '1', fault_value: '机械故障' }],
    }
  },
  created: function() {
    let oldHight = api.winWidth
    this.screenWidth = oldHight

    this.record = api.pageParam.record

    let tkn = getToken()
    if (!tkn) {
      api.openWin({
        name: 'login',
        url: './login-login.html',
        rect: {
          x: 0,
          y: 150,
          w: api.winWidth,
          h: api.winHeight,
        },
      })
    }

    //alert(JSON.stringify(this.record))
    //初始化查询多媒体信息
    this.queryRecordDetail(this.record)
  },
  methods: {
    //视频播放
    playVedio(filePath) {
      let that = this;
      if (api.deviceName.toLowerCase() == "vivo" || api.deviceName.toLowerCase() == "oppo" || api.deviceName.toLowerCase() == "honor") {
        var videoPlayer = api.require("videoPlayer");
        videoPlayer.play(
          {
            path: filePath.trim(),
            autoPlay: true
          },
          function (ret, err) {

          }
        );
      } else {
        that.$ac.openVideo({
          url: filePath.trim(),
        });
      }
    },

    //语音播放
    playArm(path) {
      //判断是播放还是暂停
      if (!this.audioLoad) {
        this.audioLoad = true
        this.audioStop = false
        if (this.audioPath == '') {
          Dialog.alert({
                          theme: 'round-button',
            message: '当前无语音信息',
          }).then(() => {
            // on close
          })
        }
        var audioStreamer = api.require('audioStreamer')
        let _this = this
        audioStreamer.addEventListener({}, function(ret) {
          if (ret.state == 'finished') {
            _this.audioLoad = false
            _this.audioStop = true
          }
        })
        audioStreamer.openPlayer(
          {
            path: path,
          },
          function(ret) {
            // if (ret.status) {
            //   api.alert({ msg: JSON.stringify(ret) })
            // }
          }
        )
      } else {
        var audioStreamer = api.require('audioStreamer')
        audioStreamer.pause()
        this.audioLoad = false
        this.audioStop = true
      }
    },

    //查询维修单信息
    async queryRecordDetail(record) {
      let _this = this
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: 'Loading...',
      })
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/report/queryRecordDetail', {
          body: record,
        })

        if (res.code === 200) {
          Toast.clear()
          // return
          //报修多媒体
          if (res.requestFiles != undefined && res.requestFiles.length > 0) {
            //筛选图片、视频、录音
            for (let i = 0; i < res.requestFiles.length; i++) {
              if (res.requestFiles[i].fileType == '0') {
                //照片
                let paths = res.requestFiles[i].filePath.split(';')

                for (let j = 0; j < paths.length; j++) {
                  let num = 0
                  if (paths[j] != '') {
                    let picture = { url: paths[j] }
                    _this.requestFile.pictures.push(picture)
                    num++
                  }
                  _this.requestPictureNum = num
                }
                //显示照片
                _this.requestPhotoShow = true
              } else if (res.requestFiles[i].fileType == '1') {
                let paths = res.requestFiles[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    let vedio = { filePath: paths[j] }
                    _this.requestFile.vedios.push(vedio)
                  }
                }
                //视频
                _this.requestVedioShow = true
              } else if (res.requestFiles[i].fileType == '2') {
                //语音
                let paths = res.requestFiles[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    _this.requestFile.audioPath = paths[j]
                    _this.requestAudioShow = true
                    break
                  }
                }
              }
            }
          }

          //维修多媒体
          if (res.repairFiles != undefined && res.repairFiles.length > 0) {
            //筛选图片、视频、录音
            for (let i = 0; i < res.repairFiles.length; i++) {
              if (res.repairFiles[i].fileType == '0') {
                //照片
                let paths = res.repairFiles[i].filePath.split(';')

                for (let j = 0; j < paths.length; j++) {
                  let num = 0
                  if (paths[j] != '') {
                    let picture = { url: paths[j] }
                    _this.repairFiles.pictures.push(picture)
                    num++
                  }
                  _this.repairPictureNum = num
                }
                //显示照片
                _this.repairPhotoShow = true
              } else if (res.repairFiles[i].fileType == '1') {
                let paths = res.repairFiles[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    let vedio = { filePath: paths[j] }
                    _this.repairFiles.vedios.push(vedio)
                  }
                }
                //视频
                _this.repairVedioShow = true
              } else if (res.repairFiles[i].fileType == '2') {
                //语音
                let paths = res.repairFiles[i].filePath.split(';')
                for (let j = 0; j < paths.length; j++) {
                  if (paths[j] != '') {
                    _this.repairFiles.audioPath = paths[j]
                    _this.repairAudioShow = true
                    break
                  }
                }
              }
            }
          }

          //维修协助人
          if (res.heleUsers != undefined && res.heleUsers.length > 0) {
            for (let i = 0; i < res.heleUsers.length; i++) {
              if (i == res.heleUsers.length - 1) {
                _this.helpUser += res.heleUsers[i].userCode
              } else {
                _this.helpUser += res.heleUsers[i].userCode + '、'
              }
            }
          }
          //维修时间
          if (res.repairTime != undefined && res.repairTime.length > 0) {
            _this.repairTime = res.repairTime[0]
          }
        } else {
          Toast.fail(res.msg)
        }
      } catch (e) {
        Toast.clear()
        alert(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: White;
}

.clickbtn {
  width: 1;
  margin: 5px 10px;
  line-height: 45px;
  border: 1px #ccc dashed;
  text-align: center;
}
.buttonRight {
  position: fixed;
  margin-top: -40px;
  right: 10px;
  width: 85px;
  height: 40px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
}
.buttonStart {
  position: fixed;
  bottom: 3px;
  left: 5px;
  width: 45%;
  height: 30px;
  background-color: #ff9933;
  border-color: #ff9933;
  font-size: 12px;
}
.buttonEnd {
  position: fixed;
  bottom: 3px;
  right: 5px;
  width: 45%;
  height: 30px;
  background-color: #1c6c8d;
  border-color: #1c6c8d;
  font-size: 12px;
}

.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.divStyle {
  border: 1px solid #dcdcdc;
  border-top-width: 3px;
  border-left-width: 3px;
  margin-left: 5px;
  margin-right: 4px;
  margin-top: 4px;
}
.pagination {
  position: fixed;
  bottom: 15px;
  width: 300px;
  margin-left: 10%;
  color: rgb(0, 0, 255);
  text-align: center;
}
.divMedia {
  margin-top: 0px;
  height: 230px;
  border: solid #dcdcdc;
  margin-left: 5px;
  margin-right: 15px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.divMessage {
  margin-top: 0px;
  border-top-width: 4px;
  border-left-width: 4px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
